import React, { useState, useEffect } from 'react'
import { Layout, Input, Icon, Form, Button, Divider, message, notification } from 'antd'
import { withRouter } from 'react-router-dom'

import { useRequest } from 'ahooks'
import { requestWrapper } from '@/utils/request'
import userAPI from '@/services/user'
import './login.scss'
const Login = props => {
    const { getFieldDecorator } = props.form

    const { data: loginData, run: login, loading: loginLoading } = useRequest(
        values =>
            requestWrapper(userAPI.login.bind(null, values), {
                autoSuccess: true,
                errorMessage: '用户名或密码错误！'
            }),
        {
            manual: true,
            onSuccess: () => {
                localStorage.setItem('accessToken', loginData.token)
                localStorage.setItem('myInfo', JSON.stringify(loginData.user))
                props.history.push('/index')
            }
        }
    )

    const loginSubmit = e => {
        e.preventDefault()
        props.form.validateFields((err, values) => {
            if (!err) {
                login(values)
            }
        })
    }

    useEffect(() => {
        notification.open({
            message: '欢迎使用后台管理平台'
        })
        return () => {
            notification.destroy()
        }
    }, [])

    return (
        <Layout className='login animated fadeIn'>
            <div className='model'>
                <div className='login-form'>
                    <span>用户登录</span>
                    <a
                        onClick={() => {
                            props.history.push('/regist')
                        }}>
                        注册
                    </a>
                    <Divider />
                    <Form onSubmit={loginSubmit}>
                        <Form.Item>
                            {getFieldDecorator('username', {
                                rules: [{ required: true, message: '请输入用户名!' }]
                            })(
                                <Input
                                    prefix={<Icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    placeholder='用户名'
                                />
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('password', {
                                rules: [{ required: true, message: '请输入密码' }]
                            })(
                                <Input
                                    prefix={<Icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    type='password'
                                    placeholder='密码'
                                />
                            )}
                        </Form.Item>
                        <Form.Item>
                            <Button
                                type='primary'
                                htmlType='submit'
                                className='login-form-button'
                                loading={loginLoading}>
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </Layout>
    )
}

export default withRouter(Form.create()(Login))
